<template>
  <el-dialog title="确认删除" v-model="dialogVisible" width="30%">
    <span>确定要删除【{{ name }}】吗？此操作不可恢复。</span>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="danger" @click="confirmDelete">确认删除</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// ✅ 定义事件（用于通知父组件）
const emit = defineEmits(['deleteSuccess'])

const dialogVisible = ref(false)
const name = ref('')
let id = null
let callback = null

const open = (row, delCallback) => {
  if (!row) {
    console.warn('未传入用户数据')
    return
  }

  name.value = row.username
  id = row.id
  callback = delCallback
  dialogVisible.value = true
}

const confirmDelete = async () => {
  try {
    const res = await callback(id)
    dialogVisible.value = false
    ElMessage.success(res.msg || '删除成功')
    emit('deleteSuccess') // ✅ 发出删除成功事件
  } catch (err) {
    ElMessage.error('删除失败')
    console.error(err)
  }
}

defineExpose({ open })
</script>
